﻿<Page x:Class="WpfAnimation.PageMatrixTransform"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d"  d:DesignHeight="350" d:DesignWidth="880" Title="PageMatrixTransform">
    <Canvas>
        <Button Width="50" Height="50" Canvas.Left="10" Canvas.Top="10"  RenderTransformOrigin=".5,.5">
            <Button.RenderTransform>
                <MatrixTransform x:Name="myMatrix" >
                    <MatrixTransform.Matrix>
                        <Matrix />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath Storyboard.TargetName="myMatrix" Storyboard.TargetProperty="Matrix"
                                                  Duration="00:00:5"   DoesRotateWithTangent="True" >
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry>
                                        <PathFigure>
                                            <BezierSegment Point1="35,310" Point2="610,35" Point3="610,310" />
                                        </PathFigure>
                                    </PathGeometry>
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        
        <Path Stroke="Black" StrokeThickness="1" Canvas.Left="35" Canvas.Top="35">
            <Path.Data>
                <PathGeometry>
                    <PathFigure>
                        <BezierSegment Point1="35,310" Point2="610,35" Point3="610,310" />
                    </PathFigure>
                </PathGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Page>
